<template>
  <div>
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <div class="wrap">
      <!-- 轮播 -->
      <!-- 自动轮播3秒 -->
      <van-swipe class="home-swipe" :autoplay="3000" indicator-color="white">
        <!-- 循环遍历 -->
        <van-swipe-item v-for="banner in banners" :key="banner.id">
          <img :src="banner.picUrl" alt="">
        </van-swipe-item>
      </van-swipe>
      <!-- /轮播 -->
      <!-- 宫格导航 -->
      <!-- 图标大小76，一行四列 -->
      <van-grid icon-size="76" class="grid" column-num="4">
        <!-- 遍历cates中的图片 -->
        <van-grid-item
          v-for="cate in cates"
          :key="cate.id"
          :icon="cate.icon"
          :to="'/itemList/'+cate.id"/>
      </van-grid>
      <!-- /宫格导航 -->
      <!-- 推荐商品 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="我也是有底线的"
        @load="onLoad"
        class="list"
      >
      <!-- {{items}} -->
        <recommend @addCart="addCart" @clickItem="enterDetail" :items="items"/>
      </van-list>
      <!-- /推荐商品添加点击事件，添加到购物车 -->
    </div>
    </van-pull-refresh>
  </div>
</template>

<script>
// 导入子组件
import Footer from '@components/Footer'
import Recommend from './components/Recommend'
// 引入接口
import { fetchCates, fetchHomeBanner, fetchItems } from '@api'
import { Toast } from 'vant'
// 是否登录
import { isLogin } from '@utils'
export default {
  name: 'home',
  data () {
    return {
      cates: [],
      // 存放轮播图的数组
      banners: [],
      // 首页推荐商品
      items: [],
      // 是否刷新，默认值为false
      isLoading: false,
      page: 1, // 当前页
      pageSize: 1, // 一页多少条
      loading: false, // 是否上拉触底
      finished: false // 数据是不是到了最后一页了
    }
  },
  created () {
    // 请求banner和分类接口中的数据
    this.fetchCates()
    this.fetchBanners()
  },
  methods: {
    addCart (item) {
      // 加入之前判断是否登录
      if (!isLogin()) {
        // 没有登录 跳转到登录页
        // 当我们创建一个vuex实例的时候自动添加一个$store
        this.$router.push('/login')
        return
      }
      // 点击加入购物车，提交到vuex的数据仓库当中
      this.$store.commit('cart/add_cart', item)
      // 跳出提示窗口
      Toast('加入购物车成功，请前往购买吧')
    },
    enterDetail (id) {
      // 进入详情页，传入参数id
      this.$router.push({
        path: '/detail',
        // query传参
        query: {
          id
        }
      })
    },
    onLoad () {
      /*
      上拉触底了
      请求下一页数据
      */
      this.fetchItems()
      // 页数加一
      this.page++
    },
    onRefresh () {
      // 用户触发了下拉刷新
      // 重新请求 列表数据
      // 初始化上拉加载 状态
      this.page = 1
      this.items = []
      // 是否加载完成，完成后不在触发load事件
      this.finished = false
      this.fetchItems()
    },
    fetchItems () {
      // 首页推荐商品的数据
      fetchItems({
        categoryId: 228889,
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        // 下拉刷新完成 下拉状态变成false
        this.isLoading = false
        // 加载下一页数据完成 此次上拉触底 状态 变成 false
        this.loading = false
        // 判断进行数据的拼接
        if (res.data.code === 0) {
        // 拼接上一页和下一页
          this.items = [...this.items, ...res.data.data]
        }
        if (res.data.code === 700) {
          // 没有数据 到了最后一页 上拉加载事件不再触发
          this.finished = true
        }
        console.log(res.data)
      })
    },
    fetchCates () {
      // 请求分类数据
      fetchCates().then(res => {
        if (res.data.code === 0) {
          this.cates = res.data.data
        }
        console.log(res.data.data)
      })
    },
    fetchBanners () {
      // 请求banner
      fetchHomeBanner().then(res => {
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
    }
  },
  components: {
    // eslint-disable-next-line vue/no-unused-components
    name: 'Home',
    // eslint-disable-next-line vue/no-unused-components
    Footer,
    // 注册自定义组件
    Recommend
  }
}
</script>

<style lang="scss" scoped>
.wrap{
  .home-swipe{
    margin-top: 95px;
    img{
      width: 100%;
    }
  }
}
.list{
  margin-bottom: 50px;
}
/deep/ .van-grid-item__content{
  background: pink;

}
</style>
